<template>
  <div class="padding flex direction-column height-100">
    <div class="search-form">
      <el-form inline>
        <year-month-picker v-model="time" :allow-date="false"></year-month-picker>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="clickSearch">
            查询
          </el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="flex-1 overflow-auto dark-table-wrapper">
      <el-table
        ref="table"
        v-loading="loading"
        :data="lists"
        height="100%"
        :header-cell-style="{
          backgroundColor: themeColor,
          color: 'white',
        }"
      >
        <el-table-column
          v-for="(column, index) in columns"
          :key="column.label"
          v-bind="column"
          :width="index === 0 ? 200 : ''"
          :fixed="index === 0"
          :align="index === 0 ? 'left' : 'center'"
        >

          <template v-if="column.prop === 'districtName'" #default="{ row }">
            <el-link
              :underline="false"
              type="primary"
              @click="navigateToEnterpriseAnalysis(row)"
            >
              {{ row.districtName }}
            </el-link>
          </template>
          <template v-if="column.children && column.children.length > 0" #default>
            <el-table-column
              v-for="(child, cindex) in column.children"
              :key="cindex"
              v-bind="child"
              :minWidth="100"
              align="center"
            >
            </el-table-column>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import Navigate2enterpriseAnalysis from '@/mixins/navigate2enterpriseAnalysis';
import YearMonthPicker, {
  getTimeTypeFromTime
} from '@/components/year-month-picker';
import MixinWrapUnitInThead from '@/mixins/wrap-unit-in-thead';

import { getKeyIndicatorComplexAnalysis } from '@/api/energy';
import { defaultNumber, isWebkit } from '@/utils';

export default {
  name: 'energy-efficiency-analysis-indicator',
  mixins: [Navigate2enterpriseAnalysis, MixinWrapUnitInThead],
  components: {
    YearMonthPicker
  },
  data() {
    return {
      time: '',
      loading: false,
      columns: [],
      lists: []
    };
  },
  computed: {
    themeColor() {
      return this.$store.state.user.theme;
    },
    timeType() {
      return getTimeTypeFromTime(this.time);
    }
  },
  mounted() {
    this.getTableData();
  },
  methods: {
    getParams() {
      return {
        time: this.time,
        timeType: this.timeType
      };
    },
    clickSearch() {
      this.getTableData();
    },
    async getTableData() {
      this.loading = true;
      try {
        const { data } = await getKeyIndicatorComplexAnalysis(this.getParams());
        this.columns = data.thead || [];

        const keys = ['districtCode', 'districtName'];
        (data.tbody || []).forEach(item => {
          Object.keys(item).forEach(key => {
            if (!keys.includes(key)) {
              item[key] = defaultNumber(item[key]);
            }
          })
        });
        this.lists = data.tbody || [];
      } catch (e) {
        console.warn(e);
      } finally {
        this.loading = false;
      }

      this.$nextTick(() => {
        if (isWebkit()) {
          this.$refs.table.layout.gutterWidth = 14
        }
        this.$refs.table.doLayout();
      })
    }
  }
};
</script>
